<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.2.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/pace-js@1/themes/blue/pace-theme-minimal.css">
  <script src="//cdn.jsdelivr.net/npm/pace-js@1/pace.min.js"></script>

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"yimig.github.io","root":"/","scheme":"Muse","version":"7.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":true},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
  </script>

  <meta name="description" content="你捡起了道具：遗失的纸片5# 一张普通的纸片，隐隐约约能够看到目录：“事件对象、BOM、定时器、JSON”。边角还有被撕扯的痕迹，它们应该属于一个笔记本，但不知为什么被主人撕下来丢掉了。 提示：集齐所有纸片应该可以得到一本技能书。 👇点击下方按钮调查">
<meta property="og:type" content="article">
<meta property="og:title" content="【JS】js学习小笔记 5#">
<meta property="og:url" content="http://yimig.github.io/2019/05/14/js_note5/index.html">
<meta property="og:site_name" content="Tim&#39;s Blog">
<meta property="og:description" content="你捡起了道具：遗失的纸片5# 一张普通的纸片，隐隐约约能够看到目录：“事件对象、BOM、定时器、JSON”。边角还有被撕扯的痕迹，它们应该属于一个笔记本，但不知为什么被主人撕下来丢掉了。 提示：集齐所有纸片应该可以得到一本技能书。 👇点击下方按钮调查">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2019-05-13T16:07:15.000Z">
<meta property="article:modified_time" content="2021-01-15T07:55:27.937Z">
<meta property="article:author" content="Tim">
<meta property="article:tag" content="javascript">
<meta property="article:tag" content="js学习笔记">
<meta name="twitter:card" content="summary">

<link rel="canonical" href="http://yimig.github.io/2019/05/14/js_note5/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>【JS】js学习小笔记 5# | Tim's Blog</title>
  


  <script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?64126ab668fa908027cba9464a0afec7";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>




  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

<!-- hexo injector head_end start -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hexo-math@4.0.0/dist/style.css">
<!-- hexo injector head_end end --></head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">Tim's Blog</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
      <p class="site-subtitle" itemprop="description">Learn Everything!</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="fa fa-fw fa-home"></i>首页</a>

  </li>
        <li class="menu-item menu-item-about">

    <a href="/about/" rel="section"><i class="fa fa-fw fa-user"></i>关于</a>

  </li>
        <li class="menu-item menu-item-tags">

    <a href="/tags/" rel="section"><i class="fa fa-fw fa-tags"></i>标签</a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/categories/" rel="section"><i class="fa fa-fw fa-th"></i>分类</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="fa fa-fw fa-archive"></i>归档</a>

  </li>
        <li class="menu-item menu-item-schedule">

    <a href="/schedule/" rel="section"><i class="fa fa-fw fa-calendar"></i>日程表</a>

  </li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div id="search-result">
  <div id="no-result">
    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
  </div>
</div>

    </div>
  </div>

</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>

  <a href="https://github.com/yimig" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://yimig.github.io/2019/05/14/js_note5/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/uploads/avatar.png">
      <meta itemprop="name" content="Tim">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Tim's Blog">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          【JS】js学习小笔记 5#
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2019-05-14 00:07:15" itemprop="dateCreated datePublished" datetime="2019-05-14T00:07:15+08:00">2019-05-14</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="fa fa-calendar-check-o"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2021-01-15 15:55:27" itemprop="dateModified" datetime="2021-01-15T15:55:27+08:00">2021-01-15</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/Coding/" itemprop="url" rel="index"><span itemprop="name">Coding</span></a>
                </span>
                  ，
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/Coding/Web/" itemprop="url" rel="index"><span itemprop="name">Web</span></a>
                </span>
                  ，
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/Coding/Web/JavaScript/" itemprop="url" rel="index"><span itemprop="name">JavaScript</span></a>
                </span>
                  ，
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/Coding/Web/JavaScript/Common/" itemprop="url" rel="index"><span itemprop="name">Common</span></a>
                </span>
            </span>

          
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="fa fa-file-word-o"></i>
              </span>
              <span>17k</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="fa fa-clock-o"></i>
              </span>
              <span>15 分钟</span>
            </span>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <p>你捡起了道具：<strong>遗失的纸片5#</strong> 一张普通的纸片，隐隐约约能够看到目录：<strong>“事件对象、BOM、定时器、JSON”</strong>。边角还有被撕扯的痕迹，它们应该属于一个笔记本，但不知为什么被主人撕下来丢掉了。 提示：集齐所有纸片应该可以得到一本技能书。 👇点击下方按钮调查<br><a id="more"></a></p>
<h2 id="29-事件对象"><a href="#29-事件对象" class="headerlink" title="29.事件对象"></a>29.事件对象</h2><ul>
<li>当事件的响应函数被触发时，<strong>浏览器每次都将一个事件对象作为实参传递进响应函数</strong></li>
<li>在事件对象中封装了<strong>当前事件相关的一切信息</strong>，如鼠标的坐标、按下的键、滚轮滚动的方向等</li>
</ul>
<h3 id="①mouseEvent"><a href="#①mouseEvent" class="headerlink" title="①mouseEvent"></a>①mouseEvent</h3><p>该事件将会在鼠标再元素中移动时被触发 <strong>常用属性：</strong></p>
<ul>
<li>相对于浏览器窗口：<ol>
<li>clientX→指针水平坐标</li>
<li>clientY→指针垂直坐标</li>
</ol>
</li>
<li>相对于页面（IE8+)<ol>
<li>pageX→指针水平坐标</li>
<li>pageY→指针垂直坐标</li>
</ol>
</li>
</ul>
<p>在IE8及以下版本的浏览器中，响应函数被触发时浏览器不会传递事件对象，取而代之，其会将时间作为window对象的属性保存。</p>
<blockquote>
<p>window.event</p>
</blockquote>
<p>该属性在火狐浏览器中不存在</p>
<h3 id="②全兼容方式："><a href="#②全兼容方式：" class="headerlink" title="②全兼容方式："></a>②全兼容方式：</h3><p>在响应函数中添加：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">event=eventwindow.event;</span><br></pre></td></tr></table></figure>
<h3 id="④事件的冒泡"><a href="#④事件的冒泡" class="headerlink" title="④事件的冒泡"></a>④事件的冒泡</h3><ul>
<li>所谓的冒泡指的就是<strong>事件的向上传导</strong>，当后代元素的事件被触发时，其<strong>祖先元素</strong>的<strong>相同事件</strong>也会被触发</li>
<li>在开发中大部分情况冒泡是有用的，如果不希望发生事件冒泡可以通过事件对象来取消冒泡：将<code>event.cancelBubble</code>设置为true即可取消冒泡</li>
</ul>
<h3 id="⑤事件的委派"><a href="#⑤事件的委派" class="headerlink" title="⑤事件的委派"></a>⑤事件的委派</h3><p>我们希望，只绑定依次事件，即可应用到若干元素上，即使元素是后添加的。</p>
<blockquote>
<p>可以尝试将其绑定给元素共同的祖先元素→<strong>原事件冒泡到祖先事件</strong></p>
</blockquote>
<p><strong>事件的委派：</strong> - 指将事件统一绑定给元素的共同祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素从而通过祖先元素的响应函数来处理事件 - 事件的委派利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能 <strong>防止祖先元素被触发：</strong>如果触发事件的对象是我们期望的元素则执行，否则不执行 使用<code>event.target</code>属性可以得到触发事件的元素</p>
<h3 id="⑥事件的绑定"><a href="#⑥事件的绑定" class="headerlink" title="⑥事件的绑定"></a>⑥事件的绑定</h3><h4 id="㈠addEventListener-（IE8-）"><a href="#㈠addEventListener-（IE8-）" class="headerlink" title="㈠addEventListener() （IE8+）"></a>㈠addEventListener() （IE8+）</h4><p>通过该方法可为元素绑定响应函数 <strong>参数：</strong> </p>
<ol>
<li>时间的字符串，<strong>不要“on”</strong> </li>
<li>回调函数，当事件触发时该函数会被调用 </li>
<li>是否在捕获阶段触发事件，需要一个布尔值，<strong>一般都传“false”</strong> 使用addEventListener()可谓一个元素的相同事件同时绑定多个响应函数，这样当事件触发时，响应函数将会<strong>按照函数的绑定顺序执行this绑定的事件</strong></li>
</ol>
<h4 id="㈡attachEvent-（IE1-10）"><a href="#㈡attachEvent-（IE1-10）" class="headerlink" title="㈡attachEvent() （IE1~10）"></a>㈡attachEvent() （IE1~10）</h4><p><strong>参数：</strong> </p>
<ol>
<li>事件字符串<strong>（要on）</strong> </li>
<li>回调函数 该方法可同时为一个事件绑定多个处理函数 不同的是它是<strong>后绑定先执行</strong>，执行顺序与addEventListener()相反</li>
</ol>
<h4 id="㈢全兼容方式："><a href="#㈢全兼容方式：" class="headerlink" title="㈢全兼容方式："></a>㈢全兼容方式：</h4><ol>
<li>obj→要绑定的对象</li>
<li>eventStr→事件的字符串 <strong>(不要on)</strong></li>
<li>callback→回调函数</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">bind</span>(<span class="params">obj,eventStr,callback</span>)</span></span><br><span class="line"><span class="function"></span>&#123;</span><br><span class="line">    <span class="function"><span class="title">if</span>(<span class="params">obj.addEventListener</span>)</span>&#123;</span><br><span class="line">        <span class="comment">//大部分浏览器的兼容方式</span></span><br><span class="line">        obj.addEventListener(eventStr,callback,<span class="literal">false</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">else</span>&#123;</span><br><span class="line">        <span class="comment">//this是谁由调用方式决定（callback.call(obj)）</span></span><br><span class="line">        <span class="comment">//IE8及以下浏览器</span></span><br><span class="line">        objattachEvent(<span class="string">&quot;on&quot;</span>+eventStr,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">           <span class="comment">//在匿名函数中调用回调函数 </span></span><br><span class="line">            callback.call(obj);</span><br><span class="line">        &#125;);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="⑦事件的传播"><a href="#⑦事件的传播" class="headerlink" title="⑦事件的传播"></a>⑦事件的传播</h3><ul>
<li>关于事件的传播网景公司与微软公司有不同的理解<ul>
<li>微软认为事件应该是由内向外传播，也就是事件触发时，应该先出发当前元素上的事件，然后再向当前元素的祖先元素外传播，也就是该事件应该在<strong>冒泡阶段</strong>进行</li>
<li>网景认为事件应该是由外向内传播的，也就是当前事件应该先出发当前元素的最外层祖先元素的事件，然后再<strong>向内传播</strong>给后代元素</li>
</ul>
</li>
<li>W3C结合了两个公司的方案，将事件传播分成了三个阶段：<ol>
<li><strong>捕获阶段</strong> 在捕获阶段时从最外层的祖先元素向目标元素进行事件的捕获，但默认此时不会触发事件</li>
<li><strong>目标阶段</strong> 事件捕获到目标元素，捕获结束开始在目标元素上触发事件</li>
<li><strong>冒泡阶段</strong> 事件从目标元素向其祖先元素传递，依次触发祖先元素上的事件</li>
</ol>
</li>
</ul>
<h3 id="⑧滚轮事件"><a href="#⑧滚轮事件" class="headerlink" title="⑧滚轮事件"></a>⑧滚轮事件</h3><h4 id="㈠onmousewheel"><a href="#㈠onmousewheel" class="headerlink" title="㈠onmousewheel"></a>㈠onmousewheel</h4><ul>
<li>鼠标滚轮滚动的事件，会在滚轮滚动时触发</li>
<li>火狐不支持该属性，其<strong>通过addEventListener()函数绑定DOMMouseScroll事件来绑定相应函数</strong> 例：</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">addEventListener(obj,<span class="string">&quot;DOMMouseScroll&quot;</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="comment">//相应函数体</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<ul>
<li>兼容性解决方案：</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">obj.onmousewheel=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="comment">//相应函数体</span></span><br><span class="line">&#125;;</span><br><span class="line">addEventListener(obj,<span class="string">&quot;DOMMouseScroll&quot;</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="comment">//相应函数体</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<h4 id="㈡判断方向"><a href="#㈡判断方向" class="headerlink" title="㈡判断方向"></a>㈡判断方向</h4><ol>
<li><code>event.wheelDelta</code>属性可以获取鼠标滚轮的滚动方向<ul>
<li><strong>火狐不能用</strong></li>
<li><strong>向上→120；向下→120</strong></li>
<li><strong>不看大小只看正负</strong></li>
</ul>
</li>
<li><code>event.detail</code><ul>
<li><strong>只有火狐能用</strong></li>
<li><strong>向上→-3；向下→3</strong></li>
<li><strong>不看大小只看正负</strong></li>
</ul>
</li>
<li>兼容性解决方案：</li>
</ol>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span>(event.wheelDelta&gt;<span class="number">0</span>event.detail&lt;<span class="number">0</span>)</span><br><span class="line">&#123;</span><br><span class="line">    <span class="comment">//向上滚</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">else</span></span><br><span class="line">&#123;</span><br><span class="line">    <span class="comment">//向下滚</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="㈢当滚轮滚动时，若浏览器有滚动条，滚动条会随之滚动"><a href="#㈢当滚轮滚动时，若浏览器有滚动条，滚动条会随之滚动" class="headerlink" title="㈢当滚轮滚动时，若浏览器有滚动条，滚动条会随之滚动"></a>㈢当滚轮滚动时，若浏览器有滚动条，滚动条会随之滚动</h4><p>这是浏览器的默认行为，若不希望其发生，可以取消默认行为</p>
<blockquote>
<p>return false;</p>
</blockquote>
<p><strong>火狐：</strong> 使用addEventListener()方法绑定的响应函数不能通过return false来取消默认行为，需要使用event来取消默认行为：</p>
<blockquote>
<p>event.preventDefault();</p>
</blockquote>
<p><strong>兼容性解决方案：</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">event.preventDefault&amp;&amp;event.preventDefault();</span><br><span class="line"><span class="keyword">return</span> <span class="literal">false</span>;</span><br></pre></td></tr></table></figure>
<h3 id="⑨键盘事件"><a href="#⑨键盘事件" class="headerlink" title="⑨键盘事件"></a>⑨键盘事件</h3><ul>
<li>键盘事件一般都会绑定给一些可以获取到焦点的对象或者document</li>
<li>常用事件<ul>
<li>onkeydown 按键被按下 若一直按某键不松手，<strong>事件会一直触发</strong>。当onkeydown连续触发时，**第一次与第二次之间间隔会稍长一些，其余会短些，这种设计是为了防止误触</li>
<li>onkeyup 按键被松开</li>
</ul>
</li>
</ul>
<h4 id="㈠获取按键"><a href="#㈠获取按键" class="headerlink" title="㈠获取按键"></a>㈠获取按键</h4><ol>
<li>可通过<code>keycode</code>属性获取某键的Unicode编码，借此可判断哪个键被按下</li>
<li>判断组合键：除了<code>keycode</code>,event还提供<code>altkey</code>/<code>ctrlkey</code>/<code>shiftkey</code>属性，这三个用来判断alt、ctrl、shift是否被按下，按下则返回true，否则返回false</li>
</ol>
<h4 id="㈡在文本框使用键盘事件"><a href="#㈡在文本框使用键盘事件" class="headerlink" title="㈡在文本框使用键盘事件"></a>㈡在文本框使用键盘事件</h4><p>在文本框中输入内容属于onkeydown的默认行为，如果在onkeydown中取消默认行为，则输入的内容不会出现在文本框中，可用此功能屏蔽某些字的输入</p>
<h3 id="⑩实验：键控div"><a href="#⑩实验：键控div" class="headerlink" title="⑩实验：键控div"></a>⑩实验：键控div</h3><ul>
<li>keycode：<ul>
<li>左：37</li>
<li>上：38</li>
<li>右：39</li>
<li>下：40</li>
<li>顺时针增加</li>
</ul>
</li>
</ul>
<p><strong>代码：</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang&#x3D;&quot;en&quot;&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset&#x3D;&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;style&gt;</span><br><span class="line">        div&#123;</span><br><span class="line">            height: 100px;</span><br><span class="line">            width:100px;</span><br><span class="line">            background-color: red;</span><br><span class="line">            position: absolute;</span><br><span class="line">        &#125;</span><br><span class="line">    &lt;&#x2F;style&gt;</span><br><span class="line">    &lt;script&gt;</span><br><span class="line">        window.onload&#x3D;function()&#123;</span><br><span class="line">            var div&#x3D;document.getElementsByTagName(&quot;div&quot;)[0];</span><br><span class="line">            document.onkeydown&#x3D;function (event) &#123;</span><br><span class="line">                event&#x3D;eventwindow.event;</span><br><span class="line">                var speed&#x3D;10;</span><br><span class="line">                if(event.ctrlKey)speed&#x3D;100;</span><br><span class="line">                switch (event.keyCode) &#123;</span><br><span class="line">                    case 37:div.style.left&#x3D;div.offsetLeft-speed+&quot;px&quot;;break;</span><br><span class="line">                    case 38:div.style.top&#x3D;div.offsetTop-speed+&quot;px&quot;;break;</span><br><span class="line">                    case 39:div.style.left&#x3D;div.offsetLeft+speed+&quot;px&quot;;break;</span><br><span class="line">                    case 40:div.style.top&#x3D;div.offsetTop+speed+&quot;px&quot;;break;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &lt;&#x2F;script&gt;</span><br><span class="line">    &lt;title&gt;keydownTest&lt;&#x2F;title&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">&lt;div&gt;&lt;&#x2F;div&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>
<h3 id="实验：元素跟随鼠标"><a href="#实验：元素跟随鼠标" class="headerlink" title="实验：元素跟随鼠标"></a>实验：元素跟随鼠标</h3><p>chrome认为浏览器的滚动条是body的，火狐等浏览器认为滚动条是html标签的 <strong>解决方案：</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//垂直：</span></span><br><span class="line"><span class="keyword">var</span> st=<span class="built_in">document</span>.body.scrollTopdocument.documentElement.scrollTop;</span><br><span class="line"><span class="comment">//水平：</span></span><br><span class="line"><span class="keyword">var</span> sl=<span class="built_in">document</span>.body.scrollLeftdocument.documentElement.scrollLeft;</span><br></pre></td></tr></table></figure>
<p><strong>代码：</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang&#x3D;&quot;en&quot;&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset&#x3D;&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;title&gt;Title&lt;&#x2F;title&gt;</span><br><span class="line">    &lt;style&gt;</span><br><span class="line">        #movdiv&#123;</span><br><span class="line">            position: absolute;</span><br><span class="line">        &#125;</span><br><span class="line">        body&#123;</span><br><span class="line">            height: 12000px;</span><br><span class="line">        &#125;</span><br><span class="line">    &lt;&#x2F;style&gt;</span><br><span class="line">    &lt;script&gt;</span><br><span class="line">        window.onload&#x3D;function()&#123;</span><br><span class="line">            var movdiv&#x3D;document.getElementById(&quot;movdiv&quot;);</span><br><span class="line">            document.onmousemove&#x3D;function(e)&#123;</span><br><span class="line">                var st&#x3D;document.body.scrollTopdocument.documentElement.scrollTop;</span><br><span class="line">                var sl&#x3D;document.body.scrollLeftdocument.documentElement.scrollLeft;</span><br><span class="line">                movdiv.style.top&#x3D;e.clientY+st+&quot;px&quot;;</span><br><span class="line">                movdiv.style.left&#x3D;e.clientX+sl+&quot;px&quot;;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &lt;&#x2F;script&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">&lt;button id&#x3D;&quot;movdiv&quot;&gt;甩掉我啊&lt;&#x2F;button&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>
<h2 id="30-BOM"><a href="#30-BOM" class="headerlink" title="30.BOM"></a>30.BOM</h2><ul>
<li>浏览器对象模型</li>
<li>BOM可以使我们通过JS<strong>操作浏览器</strong></li>
<li>在BOM中为我们提供了一组对象，用来完成浏览器的操作</li>
<li>BOM对象：<ol>
<li>window 代表的是<strong>整个浏览器窗口</strong>，同时window也是网页中的全屏对象</li>
<li>navigator 代表当前<strong>浏览器的信息</strong>，通过该对象可以来识别不同的浏览器</li>
<li>location 代表当前浏览器的<strong>地址栏信息</strong>，通过location可以获取地址栏信息或操作浏览器跳转页面</li>
<li>history 代表浏览器的<strong>历史纪录</strong>，可以通过该对象来操作浏览器的历史记录。由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，而且该操作只在档次访问时有效</li>
<li>screen 代表用户的<strong>屏幕信息</strong>，通过该对象可以获取到用户的显示器相关信息</li>
</ol>
</li>
</ul>
<p>这些BOM对象在浏览器中都是作为window对象的属性保存的，_可以通过window对象来使用，也可以直接使用_</p>
<h3 id="①navigator"><a href="#①navigator" class="headerlink" title="①navigator"></a>①navigator</h3><p>由于历史原因，navigator中的大部分属性已经不能帮助我们识别浏览器了。一般我们只会使用<code>userAgent</code>来判断浏览器信息</p>
<h4 id="㈠userAgent"><a href="#㈠userAgent" class="headerlink" title="㈠userAgent"></a>㈠userAgent</h4><p>userAgent是一个字符串，这个字符串中含有用来描述浏览器信息的内容，不同浏览器有不同的userAgent。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> ua=navigator.userAgent;</span><br><span class="line"><span class="function"><span class="title">if</span>(<span class="params"><span class="regexp">/firefox/i</span>.test(ua)</span>)</span>&#123;</span><br><span class="line">    <span class="comment">//火狐</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">else</span> <span class="function"><span class="title">if</span>(<span class="params"><span class="regexp">/chrome/i</span>.test(ua)</span>)</span>&#123;</span><br><span class="line">    <span class="comment">//chrome</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">else</span> <span class="function"><span class="title">if</span>(<span class="params"><span class="regexp">/msie/i</span>.test(ua)</span>)</span>&#123;</span><br><span class="line">    <span class="comment">//IE10以下的IE</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">else</span> <span class="keyword">if</span>(<span class="string">&quot;ActiveXObject&quot;</span> <span class="keyword">in</span> <span class="built_in">window</span>)</span><br><span class="line">&#123;</span><br><span class="line">    <span class="comment">//IE或Edge</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="㈡对于IE10-的识别，需要寻找特有对象"><a href="#㈡对于IE10-的识别，需要寻找特有对象" class="headerlink" title="㈡对于IE10+的识别，需要寻找特有对象"></a>㈡对于IE10+的识别，需要寻找特有对象</h4><p>如：ActiveXObject→IE有，其他均没有 不能直接对window.ActiveXObject进行逻辑查找，使用以下方法查找：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">if</span>(<span class="params"><span class="string">&quot;ActiveXObject&quot;</span> <span class="keyword">in</span> <span class="built_in">window</span></span>)</span>&#123;</span><br><span class="line">    <span class="comment">//IE</span></span><br><span class="line">&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">    <span class="comment">//非IE</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="②history"><a href="#②history" class="headerlink" title="②history"></a>②history</h3><ol>
<li>length 该属性可以获取到<strong>当前访问的连接数量</strong></li>
<li>back() 该方法用来<strong>退回上一个页面</strong>，与浏览器中的回退按钮作用相同</li>
<li>forward() 该方法用来<strong>跳转到下一个页面</strong>，与浏览器中的前进按钮作用相同</li>
<li>go() 该方法可以用来<strong>跳转到指定页面</strong>，它需要一个整数作为参数：<ul>
<li>正数n→向前跳转n个页面</li>
<li>负数n→向后跳转n个页面</li>
</ul>
</li>
</ol>
<h3 id="③location"><a href="#③location" class="headerlink" title="③location"></a>③location</h3><p>如果直接打印location，<strong>可获取到地址栏信息</strong>（当前页面的完整路径）。如果直接将location修改为绝对/相对路径，则页面会自动跳转到该路径，并自动生成历史纪录 1. assign() 用来跳转到其他页面，作用与直接修改location一样 1. reload() 刷新当前页面 1. reload(true) 强制清空缓存刷新页面 1. replace() 用新页面替换当前页面，不会生成历史纪录，<strong>不能回退</strong></p>
<h2 id="31-定时器"><a href="#31-定时器" class="headerlink" title="31.定时器"></a>31.定时器</h2><h3 id="①定时调用"><a href="#①定时调用" class="headerlink" title="①定时调用"></a>①定时调用</h3><p>如果希望一段程序可以<strong>每间隔一段时间执行一次</strong>可以使用定时调用</p>
<h4 id="㈠-window-setInterval"><a href="#㈠-window-setInterval" class="headerlink" title="㈠(window).setInterval()"></a>㈠(window).setInterval()</h4><p>可将一个函数每隔一段时间执行一次 <strong>参数：</strong> 1. 回调函数，该函数会每隔一段时间被调用一次 1. 每次调用间隔的时间，单位是毫秒 <strong>返回值：</strong> 返回一个Number类型的数据，这个数字用来作为定时器的唯一标识，主要用来取消定时器</p>
<h4 id="㈡clearInterval"><a href="#㈡clearInterval" class="headerlink" title="㈡clearInterval()"></a>㈡clearInterval()</h4><p>可以用来关闭一个定时器。 方法中需要一个<strong>定时器标识</strong>作为参数，这样将关闭标识对相应的定时器</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> timer=<span class="built_in">setInterval</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="comment">//定时器执行代码</span></span><br><span class="line">    <span class="keyword">if</span>(定时器关闭条件)<span class="built_in">clearInterval</span>(timer);</span><br><span class="line">&#125;,定时时间);</span><br></pre></td></tr></table></figure>
<h3 id="②实验：切换图片"><a href="#②实验：切换图片" class="headerlink" title="②实验：切换图片"></a>②实验：切换图片</h3><p><strong>注意不要开启多个定时器→每开一个就关上一个</strong></p>
<h3 id="③实验：解决键控移动div时卡顿的问题"><a href="#③实验：解决键控移动div时卡顿的问题" class="headerlink" title="③实验：解决键控移动div时卡顿的问题"></a>③实验：解决键控移动div时卡顿的问题</h3><p><strong>分离方向与速度的控制</strong> <strong>代码：</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang&#x3D;&quot;en&quot;&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset&#x3D;&quot;UTF-8&quot;&gt;</span><br><span class="line">    &lt;style&gt;</span><br><span class="line">        div&#123;</span><br><span class="line">            height: 100px;</span><br><span class="line">            width:100px;</span><br><span class="line">            background-color: red;</span><br><span class="line">            position: absolute;</span><br><span class="line">        &#125;</span><br><span class="line">    &lt;&#x2F;style&gt;</span><br><span class="line">    &lt;script&gt;</span><br><span class="line">        window.onload&#x3D;function()&#123;</span><br><span class="line">            var speed&#x3D;10;</span><br><span class="line">            var direction&#x3D;0;</span><br><span class="line">            var div&#x3D;document.getElementsByTagName(&quot;div&quot;)[0];</span><br><span class="line">            var timer&#x3D;setInterval(function()&#123;</span><br><span class="line">                switch (direction)</span><br><span class="line">                &#123;</span><br><span class="line">                    case 37:div.style.left&#x3D;div.offsetLeft-speed+&quot;px&quot;;break;</span><br><span class="line">                    case 38:div.style.top&#x3D;div.offsetTop-speed+&quot;px&quot;;break;</span><br><span class="line">                    case 39:div.style.left&#x3D;div.offsetLeft+speed+&quot;px&quot;;break;</span><br><span class="line">                    case 40:div.style.top&#x3D;div.offsetTop+speed+&quot;px&quot;;break;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,30);</span><br><span class="line">            document.onkeydown&#x3D;function (event) &#123;</span><br><span class="line">                event&#x3D;eventwindow.event;</span><br><span class="line">                if(event.ctrlKey)speed&#x3D;100;</span><br><span class="line">                else speed&#x3D;10;</span><br><span class="line">                direction&#x3D;event.keyCode;</span><br><span class="line">                &#125;;</span><br><span class="line">            document.onkeyup&#x3D;function()&#123;</span><br><span class="line">                direction&#x3D;0;</span><br><span class="line">            &#125;;</span><br><span class="line">        &#125;;</span><br><span class="line">    &lt;&#x2F;script&gt;</span><br><span class="line">    &lt;title&gt;keydownTest&lt;&#x2F;title&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">&lt;div&gt;&lt;&#x2F;div&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>
<h3 id="④延时调用"><a href="#④延时调用" class="headerlink" title="④延时调用"></a>④延时调用</h3><p><strong>setTimeOut()</strong>：延时调用一个函数<strong>不马上执行</strong>，而是隔一段时间执行，且<strong>只执行一次</strong>，用法与setInteral()相似 <strong>clearTimeOut()</strong>:关闭一个延时调用 _延时调用和定时调用实际上是可以相互代替的_，在开发过程中可根据自己的需要去选择。</p>
<h3 id="⑤实验：定时器的应用——元素移动方法"><a href="#⑤实验：定时器的应用——元素移动方法" class="headerlink" title="⑤实验：定时器的应用——元素移动方法"></a>⑤实验：定时器的应用——元素移动方法</h3><p><strong>tools.js:</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getStyle</span>(<span class="params">obj,name</span>)</span>&#123;</span><br><span class="line">    <span class="comment">//非IE8以下浏览器获取目前CSS</span></span><br><span class="line">    <span class="keyword">if</span>(<span class="built_in">window</span>.getComputedStyle)<span class="keyword">return</span> getComputedStyle(obj,<span class="literal">null</span>)[name];</span><br><span class="line">    <span class="comment">//IE8以下浏览器获取目前CSS</span></span><br><span class="line">    <span class="keyword">else</span> <span class="keyword">return</span> obj.currentStyle[name];</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*obj→控制对象</span></span><br><span class="line"><span class="comment">attr→控制属性</span></span><br><span class="line"><span class="comment">target→终点位置</span></span><br><span class="line"><span class="comment">→到达终点后的回调函数*/</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">move</span>(<span class="params">obj,attr,speed,target,callback</span>)</span>&#123;</span><br><span class="line">    <span class="comment">//防止多次点击设置多个定时器，所以每次点击移除上一个定时器</span></span><br><span class="line">    <span class="built_in">clearInterval</span>(obj.timer);</span><br><span class="line"></span><br><span class="line">    obj.timer=<span class="built_in">setInterval</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="keyword">var</span> current=getStyle(obj,attr);</span><br><span class="line">        <span class="comment">//未设置属性初值时，ie将返回auto，其不可参与运算，当这种情况发生时，将其属性赋值为0</span></span><br><span class="line">        current==<span class="string">&quot;auto&quot;</span>?current=<span class="number">0</span>:current=<span class="built_in">parseInt</span>(current);</span><br><span class="line">        <span class="comment">//判断速度方向</span></span><br><span class="line">        <span class="comment">//bug：临时变量未消除？？</span></span><br><span class="line">        <span class="keyword">if</span>(current&gt;target&amp;&amp;speed&gt;<span class="number">0</span>)speed=-speed;</span><br><span class="line">        <span class="keyword">var</span> newValue=current+speed;</span><br><span class="line">        <span class="comment">//防止速度非终点位置的整数倍造成的停止位置偏移，强制将最后的位置赋值为终点位置</span></span><br><span class="line">        <span class="keyword">if</span>((speed&gt;<span class="number">0</span>&amp;&amp;newValue&gt;target)(speed&lt;<span class="number">0</span>&amp;&amp;newValue&lt;target))newValue=target;</span><br><span class="line">        <span class="comment">//改变对象属性</span></span><br><span class="line">        obj.style[attr]=newValue+<span class="string">&quot;px&quot;</span>;</span><br><span class="line">        <span class="comment">//判断对象是否到达终点</span></span><br><span class="line">        <span class="keyword">if</span>(newValue==target)</span><br><span class="line">        &#123;</span><br><span class="line">            <span class="comment">//到达终点后清除定时器，触发回调函数</span></span><br><span class="line">            <span class="built_in">clearInterval</span>(obj.timer);</span><br><span class="line">            callback&amp;&amp;callback();</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,<span class="number">30</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>代码：</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang=<span class="string">&quot;en&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset=<span class="string">&quot;UTF-8&quot;</span>&gt;</span><br><span class="line">    &lt;title&gt;moveFunc&lt;/title&gt;</span><br><span class="line">    &lt;style&gt;</span><br><span class="line">        body&#123;</span><br><span class="line">            margin-top: <span class="number">0</span>px;</span><br><span class="line">            margin-left: <span class="number">0</span>px;</span><br><span class="line">        &#125;</span><br><span class="line">        #box1&#123;</span><br><span class="line">            width: <span class="number">100</span>px;</span><br><span class="line">            height:<span class="number">100</span>px;</span><br><span class="line">            background-color: red;</span><br><span class="line">            position: absolute;</span><br><span class="line">        &#125;</span><br><span class="line">        #box2&#123;</span><br><span class="line">            width: <span class="number">100</span>px;</span><br><span class="line">            height:<span class="number">100</span>px;</span><br><span class="line">            top:<span class="number">200</span>px;</span><br><span class="line">            background-color: yellow;</span><br><span class="line">            position: absolute;</span><br><span class="line">        &#125;</span><br><span class="line">        #line&#123;</span><br><span class="line">            width: <span class="number">0</span>px;</span><br><span class="line">            height: <span class="number">1000</span>px;</span><br><span class="line">            border-right:<span class="number">1</span>px black solid;</span><br><span class="line">            left: <span class="number">1000</span>px;</span><br><span class="line">            top:<span class="number">0</span>px;</span><br><span class="line">            position: absolute;</span><br><span class="line">        &#125;</span><br><span class="line">        #control&#123;</span><br><span class="line">            margin:<span class="number">10</span>px;</span><br><span class="line">        &#125;</span><br><span class="line">    &lt;/style&gt;</span><br><span class="line">    &lt;script src=<span class="string">&quot;tools.js&quot;</span>&gt;&lt;/script&gt;</span><br><span class="line">    &lt;script&gt;</span><br><span class="line"></span><br><span class="line">        <span class="built_in">window</span>.onload=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="keyword">var</span> box1=<span class="built_in">document</span>.getElementById(<span class="string">&quot;box1&quot;</span>);</span><br><span class="line">            <span class="keyword">var</span> box2=<span class="built_in">document</span>.getElementById(<span class="string">&quot;box2&quot;</span>);</span><br><span class="line">            <span class="keyword">var</span> btn1=<span class="built_in">document</span>.getElementById(<span class="string">&quot;btn1&quot;</span>);</span><br><span class="line">            <span class="keyword">var</span> btn2=<span class="built_in">document</span>.getElementById(<span class="string">&quot;btn2&quot;</span>);</span><br><span class="line">            btn1.onclick=<span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>&#123;</span><br><span class="line">                move(box1,<span class="string">&quot;left&quot;</span>,<span class="number">10</span>,<span class="number">1000</span>);</span><br><span class="line">            &#125;</span><br><span class="line">            btn2.onclick=<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">                move(box2,<span class="string">&quot;width&quot;</span>,<span class="number">10</span>,<span class="number">500</span>,<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">                    move(box2,<span class="string">&quot;height&quot;</span>,<span class="number">10</span>,<span class="number">500</span>,<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">                        move(box2,<span class="string">&quot;width&quot;</span>,<span class="number">10</span>,<span class="number">100</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">                            move(box2,<span class="string">&quot;height&quot;</span>,<span class="number">10</span>,<span class="number">100</span>);</span><br><span class="line">                        &#125;)</span><br><span class="line">                    &#125;)</span><br><span class="line">                &#125;)</span><br><span class="line">            &#125;;</span><br><span class="line">            <span class="comment">/*btn2.onclick=function () &#123;</span></span><br><span class="line"><span class="comment">                move(box2,&quot;width&quot;,10,10);</span></span><br><span class="line"><span class="comment">            &#125;;*/</span></span><br><span class="line">        &#125;</span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">&lt;div id=<span class="string">&quot;control&quot;</span>&gt;</span><br><span class="line">    &lt;button id=<span class="string">&quot;btn1&quot;</span>&gt;box1移动&lt;/button&gt;</span><br><span class="line">    &lt;button id=<span class="string">&quot;btn2&quot;</span>&gt;box2移动&lt;/button&gt;</span><br><span class="line">&lt;/div&gt;</span><br><span class="line">&lt;div id=<span class="string">&quot;box1&quot;</span>&gt;&lt;/div&gt;</span><br><span class="line">&lt;div id=<span class="string">&quot;box2&quot;</span>&gt;&lt;/div&gt;</span><br><span class="line">&lt;div id=<span class="string">&quot;line&quot;</span>&gt;&lt;/div&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure>
<h3 id="⑥实验——轮播页面"><a href="#⑥实验——轮播页面" class="headerlink" title="⑥实验——轮播页面"></a>⑥实验——轮播页面</h3><p><strong>代码：</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html lang=<span class="string">&quot;en&quot;</span>&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">    &lt;meta charset=<span class="string">&quot;UTF-8&quot;</span>&gt;</span><br><span class="line">    &lt;title&gt;Cycle Image Frame&lt;/title&gt;</span><br><span class="line">    &lt;style&gt;</span><br><span class="line">        *&#123;</span><br><span class="line">            margin:<span class="number">0</span>;</span><br><span class="line">            padding:<span class="number">0</span>;</span><br><span class="line">        &#125;</span><br><span class="line">        #outer&#123;</span><br><span class="line">            height: <span class="number">470</span>px;</span><br><span class="line">            <span class="comment">/*宽度值为图片宽度+外边距margin10*2=610px*/</span></span><br><span class="line">            width: <span class="number">610</span>px;</span><br><span class="line">            margin:<span class="number">50</span>px auto;</span><br><span class="line">            background-color: aquamarine;</span><br><span class="line">            padding:<span class="number">10</span>px <span class="number">0</span>;</span><br><span class="line">            position: relative;</span><br><span class="line">            overflow: hidden;</span><br><span class="line">        &#125;</span><br><span class="line">        #imgList&#123;</span><br><span class="line">            list-style: none;</span><br><span class="line">            position: absolute;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        #imgList li&#123;</span><br><span class="line">            float:left;</span><br><span class="line">            margin: <span class="number">0</span> <span class="number">10</span>px;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        #nav&#123;</span><br><span class="line">            position: absolute;</span><br><span class="line">            bottom:<span class="number">20</span>px;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        #nav a&#123;</span><br><span class="line">            float:left;</span><br><span class="line">            width: <span class="number">10</span>px;</span><br><span class="line">            height: <span class="number">10</span>px;</span><br><span class="line">            background-color: black;</span><br><span class="line">            margin: <span class="number">0</span> <span class="number">5</span>px;</span><br><span class="line">            opacity: <span class="number">0.5</span>;</span><br><span class="line">            <span class="comment">/*IE8透明*/</span></span><br><span class="line">            filter:alpha(opacity=<span class="number">50</span>);</span><br><span class="line">            border-radius: <span class="number">5</span>px;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        #nav a:hover&#123;</span><br><span class="line">            background-color: aliceblue;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        .borderbtn&#123;</span><br><span class="line">            position: absolute;</span><br><span class="line">            width: <span class="number">20</span>px;</span><br><span class="line">            height: <span class="number">100</span>px;</span><br><span class="line">            opacity: <span class="number">0.5</span>;</span><br><span class="line">            filter:alpha(opacity=<span class="number">50</span>);</span><br><span class="line">            background-color: black;</span><br><span class="line">            color: aliceblue;</span><br><span class="line">            vertical-align: center;</span><br><span class="line">            text-align: center;</span><br><span class="line">            line-height: <span class="number">100</span>px;</span><br><span class="line">            top:<span class="number">215</span>px;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        .borderbtn:hover&#123;</span><br><span class="line">            background-color: aliceblue;</span><br><span class="line">            color: black;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        #rbtn&#123;</span><br><span class="line">            right: <span class="number">0</span>px;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">    &lt;/style&gt;</span><br><span class="line">    &lt;script src=<span class="string">&quot;tools.js&quot;</span>&gt;&lt;/script&gt;</span><br><span class="line">    &lt;script&gt;</span><br><span class="line">        <span class="built_in">window</span>.onload=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line"></span><br><span class="line">            <span class="keyword">var</span> timer;</span><br><span class="line">            <span class="comment">//根据图片数量自动设置图片列的宽度</span></span><br><span class="line">            <span class="keyword">var</span> imgList=<span class="built_in">document</span>.getElementById(<span class="string">&quot;imgList&quot;</span>);</span><br><span class="line">            <span class="keyword">var</span> imgArr=<span class="built_in">document</span>.getElementsByTagName(<span class="string">&quot;img&quot;</span>);</span><br><span class="line">            imgList.style.width=<span class="number">610</span>*imgArr.length+<span class="string">&quot;px&quot;</span>;</span><br><span class="line"></span><br><span class="line">            <span class="comment">//自动居中跳转按钮</span></span><br><span class="line">            <span class="keyword">var</span> nav=<span class="built_in">document</span>.getElementById(<span class="string">&quot;nav&quot;</span>);</span><br><span class="line">            <span class="keyword">var</span> outer=<span class="built_in">document</span>.getElementById(<span class="string">&quot;outer&quot;</span>);</span><br><span class="line">            nav.style.left=(outer.offsetWidth-nav.offsetWidth)/<span class="number">2</span>+<span class="string">&quot;px&quot;</span>;</span><br><span class="line"></span><br><span class="line">            <span class="comment">//为目前显示的图片按钮更改颜色</span></span><br><span class="line">            <span class="keyword">var</span> allA=<span class="built_in">document</span>.getElementsByTagName(<span class="string">&quot;a&quot;</span>);</span><br><span class="line">            <span class="keyword">var</span> index=<span class="number">0</span>;</span><br><span class="line">            allA[index].style.backgroundColor=<span class="string">&quot;aliceblue&quot;</span>;</span><br><span class="line"></span><br><span class="line">            <span class="keyword">var</span> lbtn=<span class="built_in">document</span>.getElementById(<span class="string">&quot;lbtn&quot;</span>);</span><br><span class="line">            <span class="keyword">var</span> rbtn=<span class="built_in">document</span>.getElementById(<span class="string">&quot;rbtn&quot;</span>);</span><br><span class="line">            lbtn.onclick=<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">                index==<span class="number">0</span>?index=allA.length-<span class="number">1</span>:index--;</span><br><span class="line">                changeImg();</span><br><span class="line">            &#125;</span><br><span class="line">            rbtn.onclick=<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">                index==allA.length-<span class="number">1</span>?index=<span class="number">0</span>:index++;</span><br><span class="line">                changeImg();</span><br><span class="line">            &#125;</span><br><span class="line"></span><br><span class="line">            <span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;allA.length;i++)</span><br><span class="line">            &#123;</span><br><span class="line">                allA[i].index=i;</span><br><span class="line">                allA[i].onclick=<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">                    index=<span class="built_in">this</span>.index;</span><br><span class="line">                    changeImg();</span><br><span class="line">                &#125;;</span><br><span class="line">            &#125;</span><br><span class="line"></span><br><span class="line">            <span class="function"><span class="keyword">function</span> <span class="title">changeImg</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">                <span class="comment">//清除自动定时器</span></span><br><span class="line">                <span class="built_in">clearInterval</span>(timer);</span><br><span class="line">                <span class="comment">//imgList.style.left=-610*index+&quot;px&quot;</span></span><br><span class="line">                <span class="keyword">var</span> oldindex=<span class="built_in">parseInt</span>(imgList.style.left)/-<span class="number">610</span>;</span><br><span class="line">                <span class="keyword">var</span> speed=<span class="number">50</span>;</span><br><span class="line">                <span class="keyword">if</span>(<span class="built_in">Math</span>.abs(oldindex-index)&gt;<span class="number">1</span>)speed=<span class="number">80</span>;</span><br><span class="line">                move(imgList,<span class="string">&quot;left&quot;</span>,speed,-<span class="number">610</span>*index,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">                    <span class="comment">//动画执行完毕，开启自动切换</span></span><br><span class="line">                    autoChange();</span><br><span class="line">                &#125;);</span><br><span class="line">                setAColor();</span><br><span class="line">            &#125;</span><br><span class="line"></span><br><span class="line">            autoChange();</span><br><span class="line"></span><br><span class="line">            <span class="function"><span class="keyword">function</span> <span class="title">setAColor</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">                <span class="comment">//判断当前图片是否为最后一张图片</span></span><br><span class="line">                <span class="function"><span class="title">if</span>(<span class="params">index&gt;=imgArr.length-<span class="number">1</span></span>)</span>&#123;</span><br><span class="line">                    index=<span class="number">0</span>;</span><br><span class="line">                    <span class="comment">//通过css将图片设置到第一张</span></span><br><span class="line">                    imgList.style.left=<span class="number">0</span>;</span><br><span class="line">                &#125;</span><br><span class="line">                <span class="comment">//去除内联样式，式样式表中的鼠标悬浮变色样式实现</span></span><br><span class="line">                <span class="keyword">for</span>(<span class="keyword">var</span> i=<span class="number">0</span>;i&lt;allA.length;i++)allA[i].style.backgroundColor=<span class="string">&quot;&quot;</span>;</span><br><span class="line">                allA[index].style.backgroundColor=<span class="string">&quot;aliceblue&quot;</span>;</span><br><span class="line">            &#125;</span><br><span class="line"></span><br><span class="line">            <span class="function"><span class="keyword">function</span> <span class="title">autoChange</span>(<span class="params"></span>)</span></span><br><span class="line"><span class="function">            </span>&#123;</span><br><span class="line">                timer=<span class="built_in">setInterval</span>(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">                    index++;</span><br><span class="line">                    index%=imgArr.length;</span><br><span class="line">                    move(imgList,<span class="string">&quot;left&quot;</span>,<span class="number">40</span>,-<span class="number">610</span>*index,<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">                        setAColor();</span><br><span class="line">                    &#125;);</span><br><span class="line">                &#125;,<span class="number">3000</span>);</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">&lt;div id=<span class="string">&quot;outer&quot;</span>&gt;</span><br><span class="line">    &lt;ul id=<span class="string">&quot;imgList&quot;</span>&gt;</span><br><span class="line">        &lt;li&gt;<span class="xml"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;https://www.z4a.net/images/2019/05/13/157ca6b4974b78c89.jpg&quot;</span>&gt;</span> <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line">        &lt;li&gt;<span class="xml"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;https://www.z4a.net/images/2019/05/13/2840b21773dc852f3.jpg&quot;</span>&gt;</span> <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line">        &lt;li&gt;<span class="xml"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;https://www.z4a.net/images/2019/05/13/3197936dabdc3025c.jpg&quot;</span>&gt;</span> <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line">        &lt;li&gt;<span class="xml"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;https://www.z4a.net/images/2019/05/13/4bef50cec6ab80f08.jpg&quot;</span>&gt;</span> <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line">        &lt;li&gt;<span class="xml"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;https://www.z4a.net/images/2019/05/13/5bbaed807aafe43a4.jpg&quot;</span>&gt;</span> <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line">        &lt;li&gt;<span class="xml"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;https://www.z4a.net/images/2019/05/13/6016ef4e19fed0ded.jpg&quot;</span>&gt;</span> <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line">        &lt;li&gt;<span class="xml"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;https://www.z4a.net/images/2019/05/13/761ccf35b9ff73af5.jpg&quot;</span>&gt;</span> <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line">        &lt;li&gt;<span class="xml"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;https://www.z4a.net/images/2019/05/13/157ca6b4974b78c89.jpg&quot;</span>&gt;</span> <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line">    &lt;/ul&gt;</span><br><span class="line">    &lt;div id=<span class="string">&quot;nav&quot;</span>&gt;</span><br><span class="line">        &lt;a href=<span class="string">&quot;javascript:;&quot;</span>&gt;&lt;/a&gt;</span><br><span class="line">        &lt;a href=<span class="string">&quot;javascript:;&quot;</span>&gt;&lt;/a&gt;</span><br><span class="line">        &lt;a href=<span class="string">&quot;javascript:;&quot;</span>&gt;&lt;/a&gt;</span><br><span class="line">        &lt;a href=<span class="string">&quot;javascript:;&quot;</span>&gt;&lt;/a&gt;</span><br><span class="line">        &lt;a href=<span class="string">&quot;javascript:;&quot;</span>&gt;&lt;/a&gt;</span><br><span class="line">        &lt;a href=<span class="string">&quot;javascript:;&quot;</span>&gt;&lt;/a&gt;</span><br><span class="line">        &lt;a href=<span class="string">&quot;javascript:;&quot;</span>&gt;&lt;/a&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">    &lt;div id=<span class="string">&quot;lbtn&quot;</span> <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;borderbtn&quot;</span>&gt;&lt;&lt;/div&gt;</span><br><span class="line">    &lt;div id=<span class="string">&quot;rbtn&quot;</span> <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;borderbtn&quot;</span>&gt;&gt;&lt;/div&gt;</span><br><span class="line">&lt;/div&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure>
<h2 id="32-类的操作"><a href="#32-类的操作" class="headerlink" title="32.类的操作"></a>32.类的操作</h2><p>通过Style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面，这样执行的性能较差，且这种形式要修改多个样式时也不太方便</p>
<blockquote>
<p>可以通过修改元素的class属性来间接的修改多个央视，这样浏览器只需渲染页面一次，性能更好，并且这种方式可以使表现和行为进一步分离</p>
</blockquote>
<h3 id="①自建方法"><a href="#①自建方法" class="headerlink" title="①自建方法"></a>①自建方法</h3><p><strong>统一参数：</strong> 1. obj→操作对象 1. cn→类名</p>
<h4 id="㈠-判断类方法"><a href="#㈠-判断类方法" class="headerlink" title="㈠ 判断类方法"></a>㈠ 判断类方法</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">hasClass</span>(<span class="params">obj,cn</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> reg=<span class="keyword">new</span> <span class="built_in">RegExp</span>(<span class="string">&quot;\\b&quot;</span>+cn+<span class="string">&quot;\\b&quot;</span>);</span><br><span class="line">    <span class="keyword">return</span> reg.test(obj.className);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="㈡合并类方法"><a href="#㈡合并类方法" class="headerlink" title="㈡合并类方法"></a>㈡合并类方法</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">addClass</span>(<span class="params">obj,cn</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">if</span>(!hasClass(obj,cn))obj.className+=<span class="string">&quot;&quot;</span>+cn;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="㈢删除类方法"><a href="#㈢删除类方法" class="headerlink" title="㈢删除类方法"></a>㈢删除类方法</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">removeClass</span>(<span class="params">obj,cn</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> reg=<span class="keyword">new</span> <span class="built_in">RegExp</span>(<span class="string">&quot;\\b&quot;</span>+cn+<span class="string">&quot;\\b&quot;</span>);</span><br><span class="line">    obj.className=obj.class.replace(reg,<span class="string">&quot;&quot;</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="㈣切换类方法"><a href="#㈣切换类方法" class="headerlink" title="㈣切换类方法"></a>㈣切换类方法</h4><ul>
<li>若元素中具有该类，则删除</li>
<li>若元素中没有该类，则添加</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">toggleClass</span>(<span class="params">obj,cn</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">if</span>(hasClass(obj,cn))removeClass(obj,cn);</span><br><span class="line">    <span class="keyword">else</span> addClass(obj,cn);</span><br><span class="line">&#125; </span><br></pre></td></tr></table></figure>
<h3 id="②实验——三级菜单"><a href="#②实验——三级菜单" class="headerlink" title="②实验——三级菜单"></a>②实验——三级菜单</h3><p><strong>当div中有collapsed这个类时，div就是折叠状态，没有就是展开状态</strong></p>
<h2 id="33-JSON"><a href="#33-JSON" class="headerlink" title="33.JSON"></a>33.JSON</h2><ul>
<li>js中的对象只有js自己认识，其他语言都不认识</li>
<li>JSON就是一个特殊格式个字符串，这个字符串可以被任意语言所识别，并且可以转换为任意语言中的对象，<strong>JSON在开发中主要用来数据交互</strong></li>
<li>全名JavaScript Object Notation == JS对象方法</li>
<li>JSON与js对象的格式一样，<strong>只不过JSON字符串中的属性名必须加双引号</strong>，其他的与js语法一致</li>
</ul>
<h3 id="①分类"><a href="#①分类" class="headerlink" title="①分类"></a>①分类</h3><ol>
<li>对象：{}</li>
<li>数组：[]</li>
</ol>
<h3 id="②JSON中允许的数据类型"><a href="#②JSON中允许的数据类型" class="headerlink" title="②JSON中允许的数据类型"></a>②JSON中允许的数据类型</h3><ol>
<li>字符串</li>
<li>数值</li>
<li>布尔值</li>
<li>null</li>
<li>对象</li>
<li>数组</li>
</ol>
<p>（没有函数!!)</p>
<h3 id="③将JSON字符串转换为JS对象"><a href="#③将JSON字符串转换为JS对象" class="headerlink" title="③将JSON字符串转换为JS对象"></a>③将JSON字符串转换为JS对象</h3><p>在js中为我们提供了一个工具类，就叫JSON，该对象可将JSON转换为js对象，也可将js对象转换为JSON字符串</p>
<h4 id="㈠JSON-parse"><a href="#㈠JSON-parse" class="headerlink" title="㈠JSON.parse()"></a>㈠JSON.parse()</h4><ul>
<li>它可将JSON字符串转换为js对象</li>
<li>它需要一个JSON字符串作为参数，会将该字符串转换为js对象返回</li>
</ul>
<h4 id="㈡JSON-stringify"><a href="#㈡JSON-stringify" class="headerlink" title="㈡JSON.stringify()"></a>㈡JSON.stringify()</h4><ul>
<li>它可将一个js对象转换为JSON字符串</li>
<li>它需要一个js对象作为参数，会返回一个JSON字符串</li>
</ul>
<h3 id="JSON对象在IE7及以下浏览器中不支持，会报错"><a href="#JSON对象在IE7及以下浏览器中不支持，会报错" class="headerlink" title="JSON对象在IE7及以下浏览器中不支持，会报错"></a>JSON对象在IE7及以下浏览器中不支持，会报错</h3><blockquote>
<p>eval()</p>
</blockquote>
<ul>
<li>这个函数可以用来执行一段字符串形式的js代码，并将结果返回。</li>
<li><p>如果使用eval()执行的字符串中含有{}，它会将{}当成代码块，若不需要将其当成代码块解析，则需在字符串前后各加一个括号</p>
<blockquote>
<p>var obj=eval(“(“+JSONstr+”)”);</p>
</blockquote>
</li>
<li><p><strong>这个函数的功能很强大，但在开发中尽量不要使用，首先它的执行性能比较差，还有安全隐患！</strong> <strong>综上，若需兼容IE7及一下浏览器的JSON操作，可在网页源代码中引入JSON对象的定义文件</strong></p>
</li>
</ul>

    </div>

    
    
    

      <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/javascript/" rel="tag"># javascript</a>
              <a href="/tags/js%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/" rel="tag"># js学习笔记</a>
          </div>

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2019/05/08/js_note4/" rel="prev" title="【JS】js学习小笔记 4#">
      <i class="fa fa-chevron-left"></i> 【JS】js学习小笔记 4#
    </a></div>
      <div class="post-nav-item">
    <a href="/2019/06/02/proj_qsnetboot/" rel="next" title="【QSNetBoot】少林寺章丘分寺网络启动工具">
      【QSNetBoot】少林寺章丘分寺网络启动工具 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          
    <div class="comments" id="gitalk-container"></div>

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#29-%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1"><span class="nav-number">1.</span> <span class="nav-text">29.事件对象</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E2%91%A0mouseEvent"><span class="nav-number">1.1.</span> <span class="nav-text">①mouseEvent</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E2%91%A1%E5%85%A8%E5%85%BC%E5%AE%B9%E6%96%B9%E5%BC%8F%EF%BC%9A"><span class="nav-number">1.2.</span> <span class="nav-text">②全兼容方式：</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E2%91%A3%E4%BA%8B%E4%BB%B6%E7%9A%84%E5%86%92%E6%B3%A1"><span class="nav-number">1.3.</span> <span class="nav-text">④事件的冒泡</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E2%91%A4%E4%BA%8B%E4%BB%B6%E7%9A%84%E5%A7%94%E6%B4%BE"><span class="nav-number">1.4.</span> <span class="nav-text">⑤事件的委派</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E2%91%A5%E4%BA%8B%E4%BB%B6%E7%9A%84%E7%BB%91%E5%AE%9A"><span class="nav-number">1.5.</span> <span class="nav-text">⑥事件的绑定</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E3%88%A0addEventListener-%EF%BC%88IE8-%EF%BC%89"><span class="nav-number">1.5.1.</span> <span class="nav-text">㈠addEventListener() （IE8+）</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E3%88%A1attachEvent-%EF%BC%88IE1-10%EF%BC%89"><span class="nav-number">1.5.2.</span> <span class="nav-text">㈡attachEvent() （IE1~10）</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E3%88%A2%E5%85%A8%E5%85%BC%E5%AE%B9%E6%96%B9%E5%BC%8F%EF%BC%9A"><span class="nav-number">1.5.3.</span> <span class="nav-text">㈢全兼容方式：</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E2%91%A6%E4%BA%8B%E4%BB%B6%E7%9A%84%E4%BC%A0%E6%92%AD"><span class="nav-number">1.6.</span> <span class="nav-text">⑦事件的传播</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E2%91%A7%E6%BB%9A%E8%BD%AE%E4%BA%8B%E4%BB%B6"><span class="nav-number">1.7.</span> <span class="nav-text">⑧滚轮事件</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E3%88%A0onmousewheel"><span class="nav-number">1.7.1.</span> <span class="nav-text">㈠onmousewheel</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E3%88%A1%E5%88%A4%E6%96%AD%E6%96%B9%E5%90%91"><span class="nav-number">1.7.2.</span> <span class="nav-text">㈡判断方向</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E3%88%A2%E5%BD%93%E6%BB%9A%E8%BD%AE%E6%BB%9A%E5%8A%A8%E6%97%B6%EF%BC%8C%E8%8B%A5%E6%B5%8F%E8%A7%88%E5%99%A8%E6%9C%89%E6%BB%9A%E5%8A%A8%E6%9D%A1%EF%BC%8C%E6%BB%9A%E5%8A%A8%E6%9D%A1%E4%BC%9A%E9%9A%8F%E4%B9%8B%E6%BB%9A%E5%8A%A8"><span class="nav-number">1.7.3.</span> <span class="nav-text">㈢当滚轮滚动时，若浏览器有滚动条，滚动条会随之滚动</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E2%91%A8%E9%94%AE%E7%9B%98%E4%BA%8B%E4%BB%B6"><span class="nav-number">1.8.</span> <span class="nav-text">⑨键盘事件</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E3%88%A0%E8%8E%B7%E5%8F%96%E6%8C%89%E9%94%AE"><span class="nav-number">1.8.1.</span> <span class="nav-text">㈠获取按键</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E3%88%A1%E5%9C%A8%E6%96%87%E6%9C%AC%E6%A1%86%E4%BD%BF%E7%94%A8%E9%94%AE%E7%9B%98%E4%BA%8B%E4%BB%B6"><span class="nav-number">1.8.2.</span> <span class="nav-text">㈡在文本框使用键盘事件</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E2%91%A9%E5%AE%9E%E9%AA%8C%EF%BC%9A%E9%94%AE%E6%8E%A7div"><span class="nav-number">1.9.</span> <span class="nav-text">⑩实验：键控div</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AE%9E%E9%AA%8C%EF%BC%9A%E5%85%83%E7%B4%A0%E8%B7%9F%E9%9A%8F%E9%BC%A0%E6%A0%87"><span class="nav-number">1.10.</span> <span class="nav-text">实验：元素跟随鼠标</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#30-BOM"><span class="nav-number">2.</span> <span class="nav-text">30.BOM</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E2%91%A0navigator"><span class="nav-number">2.1.</span> <span class="nav-text">①navigator</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E3%88%A0userAgent"><span class="nav-number">2.1.1.</span> <span class="nav-text">㈠userAgent</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E3%88%A1%E5%AF%B9%E4%BA%8EIE10-%E7%9A%84%E8%AF%86%E5%88%AB%EF%BC%8C%E9%9C%80%E8%A6%81%E5%AF%BB%E6%89%BE%E7%89%B9%E6%9C%89%E5%AF%B9%E8%B1%A1"><span class="nav-number">2.1.2.</span> <span class="nav-text">㈡对于IE10+的识别，需要寻找特有对象</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E2%91%A1history"><span class="nav-number">2.2.</span> <span class="nav-text">②history</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E2%91%A2location"><span class="nav-number">2.3.</span> <span class="nav-text">③location</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#31-%E5%AE%9A%E6%97%B6%E5%99%A8"><span class="nav-number">3.</span> <span class="nav-text">31.定时器</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E2%91%A0%E5%AE%9A%E6%97%B6%E8%B0%83%E7%94%A8"><span class="nav-number">3.1.</span> <span class="nav-text">①定时调用</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E3%88%A0-window-setInterval"><span class="nav-number">3.1.1.</span> <span class="nav-text">㈠(window).setInterval()</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E3%88%A1clearInterval"><span class="nav-number">3.1.2.</span> <span class="nav-text">㈡clearInterval()</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E2%91%A1%E5%AE%9E%E9%AA%8C%EF%BC%9A%E5%88%87%E6%8D%A2%E5%9B%BE%E7%89%87"><span class="nav-number">3.2.</span> <span class="nav-text">②实验：切换图片</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E2%91%A2%E5%AE%9E%E9%AA%8C%EF%BC%9A%E8%A7%A3%E5%86%B3%E9%94%AE%E6%8E%A7%E7%A7%BB%E5%8A%A8div%E6%97%B6%E5%8D%A1%E9%A1%BF%E7%9A%84%E9%97%AE%E9%A2%98"><span class="nav-number">3.3.</span> <span class="nav-text">③实验：解决键控移动div时卡顿的问题</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E2%91%A3%E5%BB%B6%E6%97%B6%E8%B0%83%E7%94%A8"><span class="nav-number">3.4.</span> <span class="nav-text">④延时调用</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E2%91%A4%E5%AE%9E%E9%AA%8C%EF%BC%9A%E5%AE%9A%E6%97%B6%E5%99%A8%E7%9A%84%E5%BA%94%E7%94%A8%E2%80%94%E2%80%94%E5%85%83%E7%B4%A0%E7%A7%BB%E5%8A%A8%E6%96%B9%E6%B3%95"><span class="nav-number">3.5.</span> <span class="nav-text">⑤实验：定时器的应用——元素移动方法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E2%91%A5%E5%AE%9E%E9%AA%8C%E2%80%94%E2%80%94%E8%BD%AE%E6%92%AD%E9%A1%B5%E9%9D%A2"><span class="nav-number">3.6.</span> <span class="nav-text">⑥实验——轮播页面</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#32-%E7%B1%BB%E7%9A%84%E6%93%8D%E4%BD%9C"><span class="nav-number">4.</span> <span class="nav-text">32.类的操作</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E2%91%A0%E8%87%AA%E5%BB%BA%E6%96%B9%E6%B3%95"><span class="nav-number">4.1.</span> <span class="nav-text">①自建方法</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E3%88%A0-%E5%88%A4%E6%96%AD%E7%B1%BB%E6%96%B9%E6%B3%95"><span class="nav-number">4.1.1.</span> <span class="nav-text">㈠ 判断类方法</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E3%88%A1%E5%90%88%E5%B9%B6%E7%B1%BB%E6%96%B9%E6%B3%95"><span class="nav-number">4.1.2.</span> <span class="nav-text">㈡合并类方法</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E3%88%A2%E5%88%A0%E9%99%A4%E7%B1%BB%E6%96%B9%E6%B3%95"><span class="nav-number">4.1.3.</span> <span class="nav-text">㈢删除类方法</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E3%88%A3%E5%88%87%E6%8D%A2%E7%B1%BB%E6%96%B9%E6%B3%95"><span class="nav-number">4.1.4.</span> <span class="nav-text">㈣切换类方法</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E2%91%A1%E5%AE%9E%E9%AA%8C%E2%80%94%E2%80%94%E4%B8%89%E7%BA%A7%E8%8F%9C%E5%8D%95"><span class="nav-number">4.2.</span> <span class="nav-text">②实验——三级菜单</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#33-JSON"><span class="nav-number">5.</span> <span class="nav-text">33.JSON</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E2%91%A0%E5%88%86%E7%B1%BB"><span class="nav-number">5.1.</span> <span class="nav-text">①分类</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E2%91%A1JSON%E4%B8%AD%E5%85%81%E8%AE%B8%E7%9A%84%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B"><span class="nav-number">5.2.</span> <span class="nav-text">②JSON中允许的数据类型</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E2%91%A2%E5%B0%86JSON%E5%AD%97%E7%AC%A6%E4%B8%B2%E8%BD%AC%E6%8D%A2%E4%B8%BAJS%E5%AF%B9%E8%B1%A1"><span class="nav-number">5.3.</span> <span class="nav-text">③将JSON字符串转换为JS对象</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E3%88%A0JSON-parse"><span class="nav-number">5.3.1.</span> <span class="nav-text">㈠JSON.parse()</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E3%88%A1JSON-stringify"><span class="nav-number">5.3.2.</span> <span class="nav-text">㈡JSON.stringify()</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#JSON%E5%AF%B9%E8%B1%A1%E5%9C%A8IE7%E5%8F%8A%E4%BB%A5%E4%B8%8B%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%AD%E4%B8%8D%E6%94%AF%E6%8C%81%EF%BC%8C%E4%BC%9A%E6%8A%A5%E9%94%99"><span class="nav-number">5.4.</span> <span class="nav-text">JSON对象在IE7及以下浏览器中不支持，会报错</span></a></li></ol></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="Tim"
      src="/uploads/avatar.png">
  <p class="site-author-name" itemprop="name">Tim</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">90</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
          
        <span class="site-state-item-count">24</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
          
        <span class="site-state-item-count">40</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
        <a href="https://github.com/yimig" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;yimig" rel="noopener" target="_blank"><i class="fa fa-fw fa-github"></i>GitHub</a>
      </span>
      <span class="links-of-author-item">
        <a href="mailto:zhangyiming@programmer.net" title="E-Mail → mailto:zhangyiming@programmer.net" rel="noopener" target="_blank"><i class="fa fa-fw fa-envelope"></i>E-Mail</a>
      </span>
      <span class="links-of-author-item">
        <a href="https://leetcode.com/yimig/" title="LeeCode → https:&#x2F;&#x2F;leetcode.com&#x2F;yimig&#x2F;" rel="noopener" target="_blank"><i class="fa fa-fw fa-code"></i>LeeCode</a>
      </span>
      <span class="links-of-author-item">
        <a href="https://www.zhihu.com/people/tim-2-96" title="zhihu → https:&#x2F;&#x2F;www.zhihu.com&#x2F;people&#x2F;tim-2-96" rel="noopener" target="_blank"><i class="fa fa-fw fa-question-circle"></i>zhihu</a>
      </span>
  </div>


  <div class="links-of-blogroll motion-element">
    <div class="links-of-blogroll-title">
      <i class="fa fa-fw fa-link"></i>
      Links
    </div>
    <ul class="links-of-blogroll-list">
        <li class="links-of-blogroll-item">
          <a href="https://upane.cn/" title="https:&#x2F;&#x2F;upane.cn" rel="noopener" target="_blank">博客旧址</a>
        </li>
    </ul>
  </div>

      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2021</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Tim</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-area-chart"></i>
    </span>
    <span title="站点总字数">183k</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-coffee"></i>
    </span>
    <span title="站点阅读时长">2:46</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> & <a href="https://muse.theme-next.org/" class="theme-link" rel="noopener" target="_blank">NexT.Muse</a> 强力驱动
  </div>

        








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/muse.js"></script>


<script src="/js/next-boot.js"></script>


  <script defer src="//cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/three.min.js"></script>
    <script defer src="//cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/canvas_sphere.min.js"></script>


  
  <script>
    (function(){
      var bp = document.createElement('script');
      var curProtocol = window.location.protocol.split(':')[0];
      bp.src = (curProtocol === 'https') ? 'https://zz.bdstatic.com/linksubmit/push.js' : 'http://push.zhanzhang.baidu.com/push.js';
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(bp, s);
    })();
  </script>




  
<script src="/js/local-search.js"></script>













  

  

  

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">

<script>
NexT.utils.loadComments(document.querySelector('#gitalk-container'), () => {
  NexT.utils.getScript('//cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js', () => {
    var gitalk = new Gitalk({
      clientID    : 'a876807f33858291f9d9',
      clientSecret: '7a5c6a83611c309965d7339d7ca5f16e34a21e9f',
      repo        : 'yimig.github.io',
      owner       : 'yimig',
      admin       : ['yimig'],
      id          : '569080ff002812bfd088d91ee230ba56',
        language: '',
      distractionFreeMode: true
    });
    gitalk.render('gitalk-container');
  }, window.Gitalk);
});
</script>

</body>
</html>
